import React, {Component,} from 'react'
import {connect,} from 'react-redux'
import {withRouter,} from 'react-router-dom'
import {Icon, Modal, Toast, } from "antd-mobile"
import './GameCollections.css'
import {bindEvent, getDom,} from "../../../utils/commonfunc";
import shareUrl from "../../../res/images/web/video/share备份@2x.png"
import thumbIcon from "../../../res/images/web/video/编组 19@2x.png"
import thumbIconCheck from "../../../res/images/web/video/编组 19@2x checked.png"
import shareUrlHei from "../../../res/images/web/video/share2@2x.png"
import thumbIconHei from "../../../res/images/web/video/编组 19@2x (1).png"
import thumbIconHeiChecked from "../../../res/images/web/video/编组 19@2x checked_hei.png"
import pinglunUrl from "../../../res/images/web/video/talk@2x.png"
import dianzanUrl from "../../../res/images/web/video/up@2x.png"
import {
    addHitCount,
    behaviorReq,
    doCommentVod,
    getVodCommentReq,
    getVodDetailReq,
    getVodExpReq,
    hitReq
} from "../../../apis/goApis";
import LocalStorageService from "../../../utils/LocalStorageService";
import CommentItem from "../../topic-detail/CommentItem/CommentItem";
import _ from 'lodash'
import {copyToClip} from "../../../utils/copy";
import {app_name} from "../../../utils/constants";
import videoBgUrl from '../../../res/images/web/video/video bg 1@2x.png'
import '../../../style/animation.css'
import {onTaskDone} from "../../plan-detail/plan-detail";
import TaskDoneNotice from "../../plan-detail/task-done-notice/task-done-notice";
import GoBackLayout from "../../../layouts/GoBackLayout/GoBackLayout";

class GameCollections extends Component {

    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.storage = LocalStorageService
        this.state = {
            p: 0,
            cP: 0,
            c2P: 0,
            end: false,
            list: [],
            video: {
                Heng: 1,
                Url: '',
                Title: '',
                Titleimg: '',
                played: false,
            },
            videoComments: [],
            videoCommentsEnd: false,
            select: false,
            txt: '',
            selectComment: {},
            commentSelect: false,
            videoAtTop: true,
            videoOut: false,
            taskDone: false,
            taskInfo: '',
        }
    }

    componentDidMount() {
        // this.checkColHei(this.state.fakeTemplate)

        const ps = {p: 0,}

        this.props.doFetchVodList(ps)
        // this.props.doFetchHighlightList()
        const vodList = this.props.vodList
        const list = [...vodList].map(v => {v.play = false; return v})
        this.setState({
            list,
        })


        this.bindMainContainerScrollEvent()

        const params = this.checkParams()
        if (params) {
            this.getVodDetail(params)
                .then((data) => this.setVodDetail(data))
                .then(() => this.getVodComment(this.state.video))
        }
        // videoTag.current.setAttribute('playsinline', '')
        // videoTag.current.setAttribute('webkit-playsinline', '')
        // videoTag.current.setAttribute('x5-playsinline', '')
        // videoTag.current.setAttribute('x-webkit-airplay', 'allow')

    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        const vodList = this.props.vodList
        const vodListP = prevProps.vodList
        if (vodList.length !== vodListP.length) {
            const list = [...vodList].map(v => {v.play = false; return v})
            this.setState({
                list,
            })
        }
        if (this.videoTag) {
            this.videoTag.setAttribute('webkit-playsinline', true)
        }

    }

    bindMainContainerScrollEvent = () => {
        const mainListCtn = getDom('.am-tabs-pane-wrap-active')
        bindEvent(mainListCtn, 'scroll', _.debounce(() => {
            const select = this.state.select
            const commentSelect = this.state.commentSelect
            if (select) return
            if (commentSelect) return
            const scrollHei = mainListCtn.scrollHeight
            const top = mainListCtn.scrollTop
            const ctnHei = mainListCtn.getBoundingClientRect().height
            const atBottom = (ctnHei + top) === scrollHei
            if (atBottom) {
                const end = this.state.end
                const endCallback = () => {
                    Toast.info('已经没有视频了~')
                    this.setState({
                        end: true,
                    })
                }
                if (!end) {
                    const cP = this.state.p
                    const nP = cP + 1
                    this.setState({
                        p: nP,
                    })
                    this.props.doFetchVodList({p: nP, endCallback,})
                }
            }

        }, 100))
    }

    checkParams = () => {
        const search = this.props.location.search.slice(1)
        if (search.length === 0) return false
        const a = search.split('&')
        const params = {}
        a.map(keyVal => {
            const a = keyVal.split('=')
            const key = a[0]
            let val = a[1]
            if (key === 'id') val = Number(val)
            params[key] = val
        })
        return params
    }

    getVodDetail = params => {
        const resp = getVodDetailReq(params)
        resp.then((resp) => {
            const video = resp.data
            return video
        })
        return resp
    }

    setVodDetail = (data) => {
        const video = data.data.ok
        this.setState({
            video,
            select: true,
        })
    }

    onChange = (e, type) => {
        const v = e.target.value
        this.setState({
            [type]: v,
        })
    }


    checkColHei = (list) => {
        if (!list) return 0

        const even = []
        const odd = []
        let evenHei = 0
        let oddHei = 0
        let gap = 74 + 8
        list.map((item, index) => {
            if (index % 2 === 0) {
                odd.push(item)
            } else {
                even.push(item)
            }
        })
        even.map(item => {
            if (!item.Heng) {
                evenHei += 230 + gap
            } else {
                evenHei += 100 + gap
            }
        })
        odd.map(item => {
            if (!item.Heng) {
                oddHei += 230 + gap
            } else {
                oddHei += 100 + gap
            }
        })
        return evenHei > oddHei ? evenHei : oddHei
    }

    checkBeforeCommit = () => {
        const isLogin = this.storage.get('isLogin')
        return isLogin
        const detail = this.props.user.userdetail
        const {
            Viplevel,
            Vip,
        } = detail
        if (!isLogin) return false
        if (Vip > 0) return true
        return Viplevel >= 5
    }

    alert = () => {
        const btnList = [
            {text: '知道了', onPress: () => {}},
            // {text: <span>如何升级</span>, onPress: () => {this.props.history.push('../userinfo/level')}},
            {text: <span>登陆</span>, onPress: () => {this.props.history.push('../../login')}},
        ]
        // Modal.alert('等级需到达5级以上或者会员才可以互动', '', btnList)
        Modal.alert('只有会员才可以互动', '', btnList)
    }


    checkUser = () => {
        // const login = LocalStorageService.get('isLogin')
        //
        // if (login === null) {
        //     this.loginAlert()
        // } else {
        //     return true
        // }
        if (!this.checkBeforeCommit()) {
            this.alert()
            return false
        } else {
            return true
        }
    }

    loginAlert = () => {
        const btnList = [
            {text: '知道了', onPress: () => {}},
            {text: <span>去注册</span>, onPress: () => {this.props.history.push('../reg')}},
        ]
        Modal.alert('需要注册会员', '', btnList)
    }

    onShare = () => {

        const href = window.location.href
        const copy = copyToClip(href)
        if (copy) {
            Toast.info('网页链接复制成功')
        } else {
            Toast.info('复制不成功 请手动复制')
        }
    }

    onVodZan = () => {

        const allow = this.checkUser()
        if (allow) {
            const video = this.state.video
            // Comment: 102
            // Createt: "2020-06-02T14:32:55.363378+08:00"
            // Heng: 0
            // Id: 75
            // Src: "小贱"
            // Title: "牛奶"
            // Titleimg: "https://youtoball.oss-cn-shenzhen.aliyuncs.com/video/20200602143028.3.jpg"
            // Uid: "fangguan"
            // Url: "https://youtoball.oss-cn-shenzhen.aliyuncs.com/video/20200602143028.4.mp4"
            // Zannum: 3
            // play: false

            const huatiid = video.Id
            const zan = 1
            const uid = this.uid
            const txt = ''
            const commentid = -1
            doCommentVod({huatiid, zan, uid, txt, commentid,})
                .then((res) => {
                    // if (res.ok)
                    if (res.data.ok) {
                        Toast.info('点赞成功', 1, )
                        this.setState({
                            video: {
                                ...this.state.video,
                                Zannum: this.state.video.Zannum + 1,
                                zaned: true,
                            }
                        })
                    }
                    if (res.data.err === 50004) {
                        Toast.info('您已经点赞过这个视频',1,)
                    }
                })
        }


    }

    onTouchEnd = (e) => {

        const ctn = this.listCtn
        const last = ctn.lastElementChild
        const end = this.state.end
        const rect = last.getBoundingClientRect()
        const cH = document.documentElement.clientHeight
        const top = rect.top
        const endCallback = () => {
            Toast.info('已经没有视频了~')
            this.setState({
                end: true,
            })
        }
        if (cH > top) {
            // this.props.doFetchVodList({p: 0,})
            if (end) {
                return
                // Toast.info('已经没有视频了~')
            } else {
                const cP = this.state.p
                const nP = cP + 1
                this.setState({
                    p: nP,
                })
                this.props.doFetchVodList({p: nP, endCallback,})
            }
        }

    }


    onPlay = (id) => {
        const list = [...this.state.list]
        const i = list.findIndex(v => v.Id === id)
        for (let j = 0; j < list.length; j++) {
            list[j].play = i === j
        }
        this.setState({
            list,
        })
    }

    onSelectVod = (video) => {
        video.played = false
        const isLogin = LocalStorageService.get('userid')
        if (isLogin) {
            behaviorReq({
                userid: LocalStorageService.get('userid'),
                handle: '点击视频',
            })
            onTaskDone(this.uid, 'ksplyd')
                .then(data => {
                    if (data.Code === 0) {
                        this.setState({
                            taskDone: true,
                            taskInfo: data.Msg,
                        })
                    }
                })
        }
        addHitCount('video', {id: video.Id, title: video.Title,})
        this.setState({
            video: video,
            select: true,
        }, () => {

            this.getVodComment(video)
            const isLogin = this.storage.get('isLogin')
            const uid = this.uid
            const params = {id: video.Id}
            if (isLogin) {
                params.uid = uid
            }
            this.getVodDetail(params)
                .then(data => {
                    const zaned = data.data.zaned
                    this.setState({
                        video: {
                            ...video,
                            zaned,
                        }
                    })
                })
            this.addVodHit()
        })
    }

    cancelVod = () => {
        this.setState({
            select: false,
            video: {},
            videoComments: [],
            cP: 0,
            videoAtTop: true,
        })
        this.videoTag.pause()
    }

    formatComments = comments => {
        const result = [...this.state.videoComments]
        comments.map(c => {
            const hfId = c.Hfid
            if (hfId === -1) {
                result.push(c)
            } else {
                const i = result.findIndex(c => c.Id === hfId)
                if (i > -1) {
                    const cs = result[i].comments
                    if (cs) {
                        result[i].comments.data[0].push(c)
                    } else {
                        result[i].comments = {
                            data: {0: [c,]},
                        }
                        // result[i].comments = [c,]
                    }
                }

            }
        })
        result.forEach(c => {
            c.end = c.Comnum <= 10;
        })
        return result
    }

    addVodHit = () => {
        const userid = LocalStorageService.get('userid')
        if (userid) {
            hitReq({
                userid,
                handle: 2,
            })
        }
    }

    getVodComment = async (video) => {


        const p = this.state.cP
        const cid = 1
        const huatiid = video.Id
        const uid = this.uid
        const resp = await getVodCommentReq({p, cid, huatiid, uid,})

        const videoComments = this.formatComments(resp.data.ok)
        const commentTotal = video.Comment
        const curCommentTotal = videoComments.length
        if (curCommentTotal === commentTotal || commentTotal < 10) {
            this.setState({
                videoCommentsEnd: true,
            })
        }
        this.setState({
            videoComments,
        })
    }

    getVodCommentComment = () => {
        const c = this.state.selectComment
        const params = {
            p: this.state.c2P,
            cid: 2,
            commentid: c.Id,
        }
        const resp = getVodCommentReq(params)
        resp.then(resp => {
            const list = resp.data.ok
            const comments = {
                data: {
                    [this.state.c2P]: list,
                },
            }
            this.setState({
                txt: '',
                selectComment: {
                    ...this.state.selectComment,
                    Comnum: this.state.selectComment.Comnum + 1,
                    comments,
                },
            })
        })
        return resp
    }

    comment = (data) => {
        const allow = this.checkUser()
        if (allow) {
            const params = {
                uid: this.uid,
                huatiid: this.state.video.Id,
                commentid: data.commentid,
                txt: this.state.txt,
                zan: 0,
                // huatiuid: data.huatiuid,
            }
            const resp = doCommentVod(params)
            resp
                .then((data) => {
                    const succ =  data.data.ok === 1
                    if (succ) {
                        this.setState(({
                            videoComments: [],
                            cP: 0,
                        }), () => {
                            this.getVodComment(this.state.video)
                                .then(() => {
                                    this.setState({
                                        txt: '',
                                    })
                                })
                        })
                    } else {
                        const err = data.data.err
                        if (err === 50008) {
                            Toast.info(`您的评论包含敏感字符${data.data.data}`)
                        }

                    }
                })
        }


    }

    commentLevel2 = () => {
        if (this.checkUser()) {
            const c = this.state.selectComment
            const params = {
                uid: this.uid,
                huatiid: c.Htid,
                commentid: c.Id,
                txt: this.state.txt,
                zan: 0,
                huatiuid: c.Hfuid,
            }
            const resp = doCommentVod(params)
            resp.then((data) => {
                const succ =  data.data.ok === 1
                if (succ) {
                    // console.log(video)
                    // p //评论的页数，从0开始，根据cid确定为一级评论或者二级评论页数
                    // cid //cid为1时，获取一级评论，cid为2时获取二级评论
                    // huatiid //当cid为1时候，需要填写话题id
                    // commentid //当cid为2时，需要填写一级评论id
                    // lzuid //当只看楼主的时候，需要传入楼主id
                    this.getVodCommentComment().then(() => {
                        this.setState({
                            videoComments: [],
                            cP: 0,
                        }, () => {
                            this.getVodComment(this.state.video)
                        })
                    })

                } else {
                    const err = data.data.err
                    if (err === 50008) {
                        Toast.info(`您的评论包含敏感字符${data.data.data}`)
                    }

                }
            })
        }
    }

    zan = (data, comment,) => {

        if (this.checkUser()) {
            const did = comment.Zan > 0
            if (did > 0) {
                Toast.info('你已经赞过啦')
                return
            }

            const params = {
                uid: this.uid,
                huatiid: this.state.video.Id,
                commentid: data.commentid,
                txt: '',
                zan: 1,
            }
            doCommentVod(params)
                .then((resp) => {
                    if (resp.data.ok === 1) {
                        Toast.info('点赞评论成功')
                        const cs = this.state.videoComments
                        const index = cs.findIndex(comment => comment.Id === data.commentid)
                        cs[index].Zan = 1
                        cs[index].Zannum++
                        this.setState({
                            videoComments: cs,
                        })
                    }
                })

        }

    }

    zanLevel2 = () => {
        const comment = this.state.selectComment
        if (this.checkUser()) {
            const did = comment.Zan > 0
            if (did > 0) {
                Toast.info('你已经赞过啦')
                return
            }
        }
        const params = {
            uid: this.uid,
            huatiid: this.state.video.Id,
            commentid: comment.Id,
            txt: '',
            zan: 1,
        }
        doCommentVod(params)
            .then((resp) => {
                if (resp.data.ok === 1) {
                    Toast.info('点赞评论成功')
                    comment.Zan = 1
                    comment.Zannum++
                    this.setState({
                        selectComment: comment,
                    })
                }
            })


    }

    reply = (comment) => {

        this.setState({
            selectComment: comment,
            commentSelect: true,
        })

    }


    fetchNextPage = async (params) => {

        const resp = await getVodCommentReq(params)
        const videoComments = this.state.videoComments
        const respComments = resp.data.ok
        const cid = params.commentid
        const p = params.p
        const comment = videoComments.find(c => c.Id === cid)
        comment.comments.data[p] = respComments
        if (respComments.length < 10) {
            comment.end = true
        } else {
            const commentTotal = comment.Comnum
            const curTotal = Object.values(comment.comments.data).reduce((a, b) => a.length + b.length)
            if (commentTotal === curTotal) comment.end = true
        }

        this.setState({
            videoComments,
            selectComment: {
                ...this.state.selectComment,
                comments: {
                    ...comment.comments,
                },
                end: comment.end,
            },

        }, () => {
        })
    }

    fetchNextPageScroll = async () => {
        const end = this.state.videoCommentsEnd
        const cs = this.state.videoComments.length
        if (end && cs > 0) {
            Toast.info('没有更多视频评论了')
        } else {
            this.setState({
                cP: this.state.cP + 1,
            }, () => {
                this.getVodComment(this.state.video)
            })
        }

    }

    onVideoScroll = _.debounce(() => {

        const ctn = this.videoCtn
        const top = ctn.scrollTop
        const scrollHei = ctn.scrollHeight
        const cliHei = document.documentElement.clientHeight
        const videoTag = this.videoTag
        const videoRect = videoTag.getBoundingClientRect()
        const videoHei = videoRect.height
        const videoY = videoRect.y
        const videoYDiff = videoHei + videoY

        if (videoYDiff <= 128) {
            this.setState({
                videoOut: true,
            })
        } else if (videoYDiff > 64) {
            this.setState({
                videoOut: false,
            })
        }

        if (top > 0) {
            this.setState({
                videoAtTop: false,
            })
        } else if (top === 0) {
            this.setState({
                videoAtTop: true,
            })
        }

        if (cliHei + top === scrollHei) {
            this.fetchNextPageScroll()
        }


    }, 100)

    onVodPlay = (e) => {
        const uid = this.uid
        const played = this.state.video.played
        if (!played) {
            this.setState({
                video: {
                    ...this.state.video,
                    played: true,
                }
            })
            if (uid) {
                getVodExpReq({uid,})
                    .then((resp) => {
                        const addExp = resp.data.ok.addexp

                        if (addExp > 0) {
                            const info = <div>
                                <p>观看视频</p>
                                <p>经验+{addExp}</p>
                            </div>
                            Toast.info(info, 1)
                        }
                    })
            }

        }

    }


    render() {

        const vodList = this.state.list
        // vodList.forEach(vod => {
        //     const random = Math.floor(Math.random() * 10)
        //     const h = random % 2 === 0
        //     vod.h = h
        // })
        let template = null
        if (vodList && vodList.length > 0) {
            template = vodList.map((v, index) => {

                const img = v.Titleimg
                const title = v.Title

                const imgDiv = <div style={{
                    height: v.Heng ? 100 : 230,
                    // background: `no-repeat contain/50% 50% url(${img})`
                    backgroundImage: `url(${img ? img : videoBgUrl})`,
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: 'cover',
                    backgroundPosition: '50% 50%',
                    borderRadius: '4px 4px 0px 0px',
                }}>
                    {/*<img alt='' src={img} style={{}}/>*/}
                </div>
                const titleDiv = <div style={{
                    background: '#fff',
                    padding: '8px',
                    marginBottom: '8px',
                    borderRadius: '0px 0px 4px 4px',
                }}>
                    <p style={{
                        fontSize: '14px',
                        lineHeight: '18px',
                        marginBottom: '8px',
                        height: '36px',
                    }}>{title}</p>
                    <p className='gray-text'>{app_name}</p>
                </div>
                return <div
                    key={index}
                    className='mansory-item'
                    onClick={() => this.onSelectVod(v)}
                >
                    {imgDiv}
                    {titleDiv}
                </div>
            })
            // template = vodList.map((v, index) => {
            //     return <VodCard video={v} key={index} onPlay={this.onPlay} isPlay={this.state.list[index].play}/>
            // })
        }

        const iconStyle = {
            width: 28,
            height: 28,
            zIndex: 201,
        }

        const video = this.state.video
        // Comment: 0
        // Createt: "2020-05-21T09:47:57.477389+08:00"
        // Heng: 1
        // Id: 58
        // Src: "小贱"
        // Title: "卡卡"
        // Titleimg: "http://test.youtoball.com/gamevideo/20200521094757.1.jpg"
        // Uid: "fangguan"
        // Url: "http://test.youtoball.com/gamevideo/20200521094757.2.mp4"
        // play: false
        const h = video.Heng !== 1
        const src = video.Url
        const title = video.Title
        const Titleimg = video.Titleimg
        const commentCount = video.Comment
        const zanCount = video.Zannum
        const zaned = video.zaned

        const input = <div
            className={this.state.videoAtTop && h
                ? 'topic-detail-bottom-input topic-detail-bottom-input-hidden'
                : 'topic-detail-bottom-input'
            }
        >
            <input
                value={this.state.txt}
                onChange={(e) => this.onChange(e, 'txt')}
            />

            <div
                className='unlock-btn'
                onClick={(e) => this.comment({commentid: -1,})}
            >评论</div>
        </div>
        const comments= this.state.videoComments

        const commentList = comments.map((c, i) => {
            let end = c.end

            return <CommentItem
                comment={c}
                end={end}
                key={i}
                index={i}
                onReply={c => this.reply(c)}
                onReport={() => this.report(c)}
                onZan={() => this.zan({commentid: c.Id,}, c,)}
                level={1}
                fetchNextPage={this.fetchNextPage}
            />
        })

        const videoNavBar = <div
            // className={this.state.videoOut
            //     ? 'video-ctn-top-icons video-ctn-top-icons-hidden flex-space-between-align-center'
            //     : 'video-ctn-top-icons flex-space-between-align-center'
            // }
            className='video-ctn-top-icons flex-space-between-align-center'
        >

            <Icon
                type="left"
                size='lg'
                style={{
                    color: '#fff',
                    // position: 'fixed',
                    // top: '18px',
                    // left: '18px',
                    zIndex: 201,
                }}
                onClick={this.cancelVod}
            />

            <div
                className='flex-center-align-center'
                style={{
                    color: '#fff',
                    // position: 'fixed',
                    // top: '18px',
                    // right: '18px',
                }}
            >
                <img src={shareUrl} alt='' style={{...iconStyle, marginRight: 12,}} onClick={this.onShare}/>
                <img src={zaned ? thumbIconCheck : thumbIcon} alt='' style={iconStyle} onClick={this.onVodZan}/>
            </div>

        </div>

        const commentNavBar = <div
            className={this.state.videoAtTop
                ? 'video-ctn-top-icons video-ctn-top-icons-white video-ctn-top-icons-white-hidden flex-space-between-align-center'
                : 'video-ctn-top-icons video-ctn-top-icons-white flex-space-between-align-center'
            }
        >
            <Icon
                type="left"
                size='lg'
                style={{
                    color: '#333',
                    // position: 'fixed',
                    // top: '18px',
                    // left: '18px',
                    zIndex: 201,
                }}
                onClick={this.cancelVod}
                // onClick={() => {
                //     this.setState({
                //         select: false,
                //         video: {},
                //         videoComments: [],
                //         cP: 0,
                //         videoAtTop: true,
                //     })
                // }}
            />

            <div
                className='flex-center-align-center'
                style={{
                    color: '#fff',
                    // position: 'fixed',
                    // top: '18px',
                    // right: '18px',
                }}
            >
                <img
                    src={shareUrlHei}
                    alt=''
                    style={{...iconStyle, marginRight: 12,}}
                    onClick={this.onShare}
                />
                <img
                    src={zaned ? thumbIconHeiChecked : thumbIconHei}
                    alt=''
                    style={iconStyle}
                    onClick={this.onVodZan}
                />
            </div>

        </div>


        const videoT = <div
            className={!this.state.select ?
                'slide-out-left video-ctn'
                : 'slide-in-right video-ctn'}
            onScroll={this.onVideoScroll}
            ref={el => this.videoCtn = el}
        >
            {this.state.videoAtTop ? videoNavBar : null}
            {commentNavBar}
            <video
                onPlay={e => this.onVodPlay(e)}
                style={{
                    width: '100%',
                    height: h ? 'calc(100 * var(--vh))' : 'auto',
                    // background: `url(${Titleimg}) center/cover`,
                    background: 'black',
                }}
                src={src}
                poster={Titleimg}
                controls
                ref={el => this.videoTag = el}
                // videoTag.current.setAttribute('playsinline', '')
                // videoTag.current.setAttribute('webkit-playsinline', '')
                // videoTag.current.setAttribute('x5-playsinline', '')
                // videoTag.current.setAttribute('x-webkit-airplay', 'allow')
                playsInline={true}
                webkit-playsinline={''}
                x5-playsinline={''}
                x-webkit-airplay='allow'
                autoPlay
            />

            <div style={{padding: '16px 12px',}}>
                <p style={{fontSize: '16px', marginBottom: '10px',}}>{title}</p>
                <div className='flex'>
                    <div className='flex-align-center' style={{marginRight: 24,}}>
                        <img src={dianzanUrl} alt='' style={{width: 16, height: 16, marginRight: 3,}}/>
                        <span>{zanCount}</span>
                    </div>
                    <div className='flex-align-center'>
                        <img src={pinglunUrl} alt='' style={{width: 16, height: 16, marginRight: 3,}}/>
                        <span>{commentCount}</span>
                    </div>
                </div>

            </div>
            {commentList}
            {input}
        </div>


        const commentInput = <div className='topic-detail-bottom-input'>
            <input
                value={this.state.txt}
                onChange={(e) => this.onChange(e, 'txt')}
            />
            <div
                className='unlock-btn'
                onClick={(e) => this.commentLevel2()}
            >评论</div>
        </div>


        const commentT = <div
            style={{
                position: 'fixed',
                top: 0,
                left: 0,
                height: '100%',
                width: '100%',
                background: '#F8F8F8',
                zIndex: 200,
                overflowY: 'scroll',
            }}
        >
            <div
                style={{
                    width: '100%',
                    height: '64px',
                    background: '#fff',
                    position: 'relative',
                }}
            >
                <Icon
                    type="left"
                    size='lg'
                    style={{
                        color: '#333',
                        position: 'absolute',
                        top: '18px',
                        left: '18px',
                        zIndex: 201,
                    }}
                    onClick={() => {
                        this.setState({
                            selectComment: {},
                            commentSelect: false,
                        })
                    }}
                />

                <div
                    className='flex-center-align-center'
                    style={{
                        color: '#fff',
                        position: 'absolute',
                        top: '18px',
                        right: '18px',
                    }}
                >
                    <img src={shareUrlHei} alt='' onClick={this.onShare} style={{...iconStyle, marginRight: 12,}}/>
                    <img src={zaned ? thumbIconHeiChecked : thumbIconHei} alt='' onClick={this.onVodZan} style={iconStyle}/>
                </div>

            </div>


            <div style={{marginBottom: '50px',}}>
                <CommentItem
                    comment={this.state.selectComment}
                    end={this.state.selectComment.comments ? this.state.selectComment.end : true}
                    level={2}
                    fetchNextPage={this.fetchNextPage}
                    onZan={() => this.zanLevel2()}

                    // onReport={this.report}
                />
            </div>

            {commentInput}

        </div>

        const hei = this.checkColHei(vodList)
        const masonryCtnStyle = {
            display: 'flex',
            flexFlow: 'column wrap',
            height: hei,
        }

        return (
            <React.Fragment>

                {this.state.select ? videoT : null}
                {/*{videoT}*/}
                {this.state.commentSelect ? commentT : null}
                {this.state.taskDone && <TaskDoneNotice taskInfo={this.state.taskInfo} onCancel={() => this.setState({taskDone: false,})}/>}
                <div
                    className='video-games-cols-ctn'
                    style={masonryCtnStyle}
                    ref={el => this.listCtn = el}
                    // onScroll={e => this.onTouchEnd(e)}
                >
                    {template}
                </div>
            </React.Fragment>


        )
    }
}

const mapState = state => ({
    vodList: state.vod.vodList,
    isLogin: state.global.isLogin,
    highlightList: state.highlight.articles,
    user: state.user,
})

const mapDispatch = dispatch => ({
    doFetchVodList: (payload) => dispatch.vod.doFetchVodList(payload),
    doFetchHighlightList: (payload) => dispatch.highlight.doFetchHighlightList(payload),
})

export default connect(mapState, mapDispatch)(withRouter(GameCollections))
